<template>
  <div class="box">
    <div class="header">
      <van-nav-bar title="我的京东" @click-left="onClickLeft">
        <template #right>
          <van-popover trigger="click" placement="bottom-end" theme="dark">
            <template #reference>
              <van-icon name="ellipsis" size="30" color="black" />
            </template>
          </van-popover>
        </template>
        <template #left>
          <van-icon name="arrow-left" size="30" color="black" />
        </template>
      </van-nav-bar>
    </div>
    <div class="main">
      <van-image
        width="50"
        height="50"
        src="https://img11.360buyimg.com/jdphoto/s120x120_jfs/t21160/90/706848746/2813/d1060df5/5b163ef9N4a3d7aa6.png"
      />
      <div class="yhm">
        追风
      </div>
      <div class="main-one">
        <div class="mainOne">
          <p>商品收藏0</p>
          <p>店铺收藏1</p>
          <p>我的足迹10</p>
        </div>
        <div class="mainTwo">
          <van-grid>
            <van-grid-item icon="credit-pay" text="待付款" />
            <van-grid-item icon="send-gift-o" text="待收货" />
            <van-grid-item icon="balance-list-o" text="退货/售后" />
            <van-grid-item icon="newspaper-o" text="全部订单" @click="$router.push('/myOrder')"/>
          </van-grid>
        </div>
      </div>

      <div class="mainThree">
        <van-grid  >
          <van-grid-item icon="service-o" text="客服服务" />
          <van-grid-item icon="todo-list-o" text="我的预约" />
          <van-grid-item icon="balance-pay" text="闲置换钱" />
          <van-grid-item icon="warn-o" text="高价回收" />
        </van-grid>
      </div>
     
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { Grid, GridItem ,} from "vant";

Vue.use(Grid);
Vue.use(GridItem);
export default {
  name: "My",
  components: {},
  methods: {
    onClickLeft() {
      this.$router.push("/home");
    },
  },
};
</script>
<style scoped>
.mainOne {
  height: 40px;
  width: 375px;
  display: flex;
  justify-content: space-between;
  background-color: antiquewhite;
  line-height: 40px;
}
.mainThree {
  margin-top: 50px;
}

</style>